import React from 'react';
import Home from '../containers/Home';
import Study from '../containers/Study';
import Me from '../containers/Me';
import Community from '../containers/Community';
import px2dp from '../utils/px2dp';
import {StyleSheet, Image} from 'react-native';
const tabOpts = {
  Home: {
    component: Home,
    options: {
      tabBarLabel: '首页',
      tabBarIcon: ({focused}) => (
        <Image
          source={
            !focused
              ? require('../assets/images/tab/tab1.png')
              : require('../assets/images/tab/tab1_checked.png')
          }
          style={styles.item1}
        />
      ),
    },
  },
  Study: {
    component: Study,
    options: {
      tabBarLabel: '学习',
      tabBarIcon: ({focused}) => (
        <Image
          source={
            !focused
              ? require('../assets/images/tab/tab2.png')
              : require('../assets/images/tab/tab2_checked.png')
          }
          style={styles.item2}
        />
      ),
    },
  },
  Community: {
    component: Community,
    options: {
      tabBarLabel: '社区',
      tabBarIcon: ({focused}) => (
        <Image
          source={
            !focused
              ? require('../assets/images/tab/tab3.png')
              : require('../assets/images/tab/tab3_checked.png')
          }
          style={styles.item3}
        />
      ),
    },
  },
  Me: {
    component: Me,
    options: {
      tabBarLabel: '我的',
      tabBarIcon: ({focused}) => (
        <Image
          source={
            !focused
              ? require('../assets/images/tab/tab4.png')
              : require('../assets/images/tab/tab4_checked.png')
          }
          style={styles.item4}
        />
      ),
    },
  },
};

const styles = StyleSheet.create({
  item1: {
    width: px2dp(38),
    height: px2dp(40),
    marginTop: px2dp(16),
  },
  item2: {
    width: px2dp(38),
    height: px2dp(46),
    marginTop: px2dp(16),
  },
  item3: {
    width: px2dp(43),
    height: px2dp(43),
    marginTop: px2dp(16),
  },
  item4: {
    width: px2dp(39),
    height: px2dp(47),
    marginTop: px2dp(16),
  },
});

module.exports = tabOpts;
